<template>
  <van-grid square class="grid">
    <van-grid-item v-for="(item, i) in navs" :key="i">
      <template #icon>
        <van-image class="img" :src="require(`@/assets/imgs/${item.icon}`)" />
      </template>
      <template #text>
        <span class="title">{{ item.title }}</span>
      </template>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  data() {
    return {
      navs: [
        { title: "美妆个护", icon: "1.png" },
        { title: "母婴用品", icon: "2.png" },
        { title: "潮流服饰", icon: "3.png" },
        { title: "跨境购", icon: "4.png" },
        { title: "手机数码", icon: "5.png" },
        { title: "居家日用", icon: "6.png" },
        { title: "玩具乐器", icon: "7.png" },
        { title: "更多", icon: "8.png" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.grid {
  width: 690px;
  height: 354px;
  background: #ffffff;
  border-radius: 10px;
  margin: auto;
  margin-top: 148px;

  .img {
    width: 82px;
    height: 82px;
  }

  .title {
    font-size: 24px;
    color: #999999;
  }
}
</style>
